/* 响应式样式设计 */

/* 移动端优先的响应式设计 */

/* 超小屏幕 (小于420px) */
@media screen and (max-width: 419px) {
  /* 更紧凑的布局 */
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* 调整卡片布局 */
  .grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  
  /* 隐藏非必要元素 */
  .hide-xs {
    display: none !important;
  }
  
  /* 调整导航和页脚 */
  .nav-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* 小屏幕 (420px-639px) */
@media screen and (min-width: 420px) and (max-width: 639px) {
  /* 小屏幕布局调整 */
  .grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  
  /* 显示更多内容 */
  .show-from-xs {
    display: block !important;
  }
}

/* 中小屏幕 (640px-767px) */
@media screen and (min-width: 640px) and (max-width: 767px) {
  /* 调整网格布局 */
  .grid-cols-sm-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* 中屏幕 (768px-1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 增加列数 */
  .grid-cols-md-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  
  /* 更大的文本和间距 */
  .detail-container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  /* 显示更复杂的导航 */
  .nav-links {
    display: flex;
  }
  
  /* 隐藏移动导航 */
  .mobile-nav {
    display: none;
  }
}

/* 大屏幕 (1024px-1279px) */
@media screen and (min-width: 1024px) {
  /* 大屏幕布局优化 */
  .grid-cols-lg-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
  }
  
  /* 增强的UI元素 */
  .card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }
  
  /* 显示更多详情 */
  .detail-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 超大屏幕 (1280px以上) */
@media screen and (min-width: 1280px) {
  /* 更多列 */
  .grid-cols-xl-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem;
  }
  
  /* 内容居中 */
  .container-content {
    max-width: 1280px;
  }
  
  /* 大型界面元素 */
  .detail-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  
  /* 增强的导航体验 */
  .nav-search-input {
    width: 20rem;
  }
}

/* 超宽屏幕 (1536px以上) */
@media screen and (min-width: 1536px) {
  /* 最多列 */
  .grid-cols-2xl-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.5rem;
  }
  
  /* 最大内容宽度 */
  .container-content {
    max-width: 1536px;
  }
}

/* 打印样式 */
@media print {
  body {
    background-color: white;
    color: black;
  }
  
  .no-print {
    display: none !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  /* 移除阴影和动画 */
  * {
    box-shadow: none !important;
    animation: none !important;
  }
}

/* 深色模式兼容性 */
@media (prefers-color-scheme: dark) {
  /* 已经是深色模式，无需额外调整 */
  .light-mode-only {
    display: none !important;
  }
}

/* 浏览器兼容性 - 针对旧版IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* 为IE提供备选样式 */
  .ie-fix {
    display: block !important;
  }
  
  /* 修复IE中的flexbox问题 */
  .flex {
    display: block;
  }
  
  /* 禁用现代CSS特性 */
  .backdrop-blur, .backdrop-filter {
    background-color: rgba(0, 0, 0, 0.7);
  }
} 